<template>
  <div>
    <div class="header">
      <span style="width: 60px; text-align: right">关键字</span>
      <el-input placeholder="请输入关键字" v-model="cmpReq.keyword" style="width: 200px; margin-left: 10px"></el-input>
      <el-button type="primary" style="margin-left: 34px" size="small" @click="getCompanies()">
        关键字搜索
      </el-button>
      <a style="margin-left: 20px" href="https://www.gsxt.gov.cn/index.html" target="_blank">
        国家企信网（查询企业信息）
      </a>
    </div>
    <div class="main">
      <div style="width: 100%; height: 100%">
        <el-table style="overflow: auto" height="100%" :data="cmpRes.Items" stripe border highlight-current-row
          @row-click="
            (row) => {
              chooseCompany = row
            }
          ">
          <el-table-column label="ID" width="60">
            <template slot-scope="scope">
              {{ scope.row.CMP_ID }}
            </template>
          </el-table-column>
          <el-table-column label="公司" prop="CMP_Name" />
          <el-table-column label="简称" prop="CMP_ShortName" width="140" />
          <el-table-column label="税号" prop="CMP_TaxNo" width="240" />
          <el-table-column label="开户银行" prop="CMP_Bank" width="240" />
          <el-table-column label="开户账号" prop="CMP_Account" width="240" />
          <el-table-column label="地址" prop="CMP_Address" />
          <el-table-column label="联系电话" prop="CMP_Phone" width="140" />
          <!-- <el-table-column label="操作" width="120">
          </el-table-column> -->
        </el-table>
        <div style="width: 100%; height: 40px">
          <el-pagination layout="total,prev,pager,next" style="float: right" background small
            :current-page.sync="cmpReq.pageIndex" :total="cmpRes.Total" :page-size="cmpReq.pageSize"
            :page-sizes="[10, 15, 20]" @size-change="
              (val) => {
                cmpReq.pageSize = val
                getCompanies()
              }
            " @current-change="getCompanies()"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getCompanies,
  getEmployees,
} from '@/api/flowCenter/platform/companyManage'

export default {
  data: function () {
    return {
      auths: [],
      cmpReq: {
        pageIndex: 1,
        pageSize: 10,
        keyword: null,
      },
      cmpRes: {
        Items: [],
        Total: 0,
      },
      empReq: {
        cmpId: 0,
        pageIndex: 1,
        pageSize: 10,
        keyword: null,
      },
      empRes: {
        Items: [],
        Total: 0,
      },

      chooseCompany: null,
      chooseEmployee: null,
    }
  },
  methods: {
    getCompanies: function () {
      getCompanies(this.cmpReq).then(({ data }) => {
        this.cmpRes = data
      })
    },
    getEmployees() {
      if (this.chooseCompany) {
        this.empReq.cmpId = this.chooseCompany.CMP_ID
        getEmployees(this.empReq).then(({ data }) => {
          this.empRes = data
        })
      } else {
        this.empRes = this.$options.data().empRes
      }
    },
  },
  created: function () {
    var data = this.$store.getters['pagination/getRoutePage'](this.$route)
    Object.assign(this.$data, data)
    this.getCompanies()
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('pagination/setRoutePage', {
      route: this.$route,
      pageData: this.$data,
    })
    next()
  },
}
</script>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: calc(100% - 130px);
  display: flex;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
